<!-- index.vue -->
<template>
  <div class="chat-container">
    <div class="chat-main">
      <!-- 左侧选项卡 -->
      <div class="chat-sidebar">
        <el-tabs v-model="activeTab" class="chat-tabs">
          <el-tab-pane label="消息列表" name="messageList">
            <MessageList
                v-if="activeTab === 'messageList'"
                :current-chat="currentChat"
                @conversation-selected="handleConversationSelected"
                @switch-to-contact="switchToContact"
            />
          </el-tab-pane>
          <el-tab-pane label="通讯录" name="contactMain">
            <ContactMain
                v-if="activeTab === 'contactMain'"
                @contact-selected="handleContactSelected"
            />
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="chat-content">
        <ChatPanel
            :current-chat="currentChat"
            @close-chat="currentChat = null"
            @send-message="handleSendMessage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MessageList from './components/MessageList.vue'
import ContactMain from './components/ContactMain.vue'
import ChatPanel from './components/ChatPanel.vue'

// 当前激活的选项卡
const activeTab = ref<string>('messageList')
const currentChat = ref<any>(null)

// 处理通讯录选择的联系人
const handleContactSelected = (contact: any) => {
  currentChat.value = contact
}

// 处理消息列表选择的会话
const handleConversationSelected = (conversation: any) => {
  currentChat.value = conversation
}

// 切换到通讯录
const switchToContact = () => {
  activeTab.value = 'contactMain'
}

// 处理发送消息
const handleSendMessage = (message: string) => {
  console.log('发送消息:', message)
  // 这里调用发送消息的API
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: white;
  padding: 20px;
}

.chat-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chat-sidebar {
  width: 320px;
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  border-radius: 8px 0 0 8px;
}

.chat-tabs {
  height: 100%;
}

.chat-tabs :deep(.el-tabs__header) {
  margin: 0;
}

.chat-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
}

.chat-tabs :deep(.el-tabs__nav) {
  width: 100%;
}

.chat-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
}

.chat-tabs :deep(.el-tabs__content) {
  height: calc(100% - 55px);
  overflow: auto;
  padding: 0;
}

.chat-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.chat-content {
  flex: 1;
  background-color: #fff;
  min-width: 0;
  border-radius: 0 8px 8px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-container {
    padding: 10px;
  }

  .chat-sidebar {
    width: 280px;
  }
}

@media (max-width: 480px) {
  .chat-main {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
    border-radius: 8px 8px 0 0;
    height: 40%;
  }

  .chat-content {
    border-radius: 0 0 8px 8px;
    height: 60%;
  }

  .chat-tabs :deep(.el-tabs__content) {
    height: calc(100% - 48px);
  }
}
</style>
